<template>
<button @click="onClick">asdfasdf</button>
  <i-vxe-table ref="appSecretRef" :tableData="tableData">
    <template #content_tempalte_content>
      <div>
        adfsadfdf
        adfsadfdf
        adfsadfdf
        adfsadfdf
      </div>
    </template>
    <template #content_tempalte>
      <div>
        测试环境
        adfsadfdf2222
        adfsadfdf33
        adfsadfdf4
      </div>
    </template>
  </i-vxe-table>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IVxeTable } from '@/entry.esm'
import {
  ResultInterFace,
  TableDataInterFace
} from '@/IVxeTable/src/IVxeTableInterFace'
export default defineComponent({
  name: 'app',
  setup () {
    const dataList = [
      {
        id: '1085556743692288',
        appName: '系统管理',
        appId: 'auth',
        // disable: true,
        appSecret: 'auth',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '1',
        status: '0',
        appDesc:
                '权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1085556743692288',
        appName: '系统管理',
        appId: 'auth',
        // disable: true,
        appSecret: 'auth1',
        iconPath: 'iconcedaohang_quanxianguanli1',
        verify: '11',
        status: '01',
        appDesc: '1',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1086054423068672',
        appName: '产品管理',
        appId: 'product',
        appSecret: 'product',
        iconPath: 'iconcedaohang_chanpinzhongxin',
        verify: '0',
        status: '0',
        appDesc: '产品管理',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '2106618124156928',
        appName: '营销获客',
        appId: 'channel',
        appSecret: 'channel',
        iconPath: 'iconcedaohang_yingxiaohuoke',
        verify: '0',
        status: '1',
        appDesc: '文都营销获客',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173753',
        appName: '线上资源',
        appId: 'consult',
        appSecret: 'consult',
        iconPath: 'iconcedaohang_zixungongju',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173755',
        appName: '选课中心',
        appId: 'order',
        appSecret: 'order',
        iconPath: 'iconcedaohang_xuankezhongxin',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173761',
        appName: '数据统计',
        appId: 'statistics',
        appSecret: 'statistics',
        iconPath: 'iconcedaohang_shujutongji',
        verify: '0',
        status: '1',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '11766827440177829',
        appName: '线索管理',
        appId: 'student',
        appSecret: 'student',
        iconPath: 'iconcedaohang_CRM',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: '_blank'
      },
      {
        id: '14445477732695069',
        appName: '消息平台',
        appId: 'msg',
        appSecret: 'msg',
        iconPath: '',
        verify: '1',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '15340278887563468',
        appName: '电子合同',
        appId: 'contract',
        appSecret: 'contract',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1085556743692288',
        appName: '系统管理',
        appId: 'auth',
        appSecret: 'auth',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '1',
        status: '0',
        appDesc:
                '权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1086054423068672',
        appName: '产品管理',
        appId: 'product',
        appSecret: 'product',
        iconPath: 'iconcedaohang_chanpinzhongxin',
        verify: '0',
        status: '0',
        appDesc: '产品管理',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '2106618124156928',
        appName: '营销获客',
        appId: 'channel',
        appSecret: 'channel',
        iconPath: 'iconcedaohang_yingxiaohuoke',
        verify: '0',
        status: '1',
        appDesc: '文都营销获客',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173753',
        appName: '线上资源',
        appId: 'consult',
        appSecret: 'consult',
        iconPath: 'iconcedaohang_zixungongju',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173755',
        appName: '选课中心',
        appId: 'order',
        appSecret: 'order',
        iconPath: 'iconcedaohang_xuankezhongxin',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173761',
        appName: '数据统计',
        appId: 'statistics',
        appSecret: 'statistics',
        iconPath: 'iconcedaohang_shujutongji',
        verify: '0',
        status: '1',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '11766827440177829',
        appName: '线索管理',
        appId: 'student',
        appSecret: 'student',
        iconPath: 'iconcedaohang_CRM',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: '_blank'
      },
      {
        id: '14445477732695069',
        appName: '消息平台',
        appId: 'msg',
        appSecret: 'msg',
        iconPath: '',
        verify: '1',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '15340278887563468',
        appName: '电子合同',
        appId: 'contract',
        appSecret: 'contract',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1085556743692288',
        appName: '系统管理',
        appId: 'auth',
        appSecret: 'auth',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '1',
        status: '0',
        appDesc:
                '权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1086054423068672',
        appName: '产品管理',
        appId: 'product',
        appSecret: 'product',
        iconPath: 'iconcedaohang_chanpinzhongxin',
        verify: '0',
        status: '0',
        appDesc: '产品管理',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '2106618124156928',
        appName: '营销获客',
        appId: 'channel',
        appSecret: 'channel',
        iconPath: 'iconcedaohang_yingxiaohuoke',
        verify: '0',
        status: '1',
        appDesc: '文都营销获客',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173753',
        appName: '线上资源',
        appId: 'consult',
        appSecret: 'consult',
        iconPath: 'iconcedaohang_zixungongju',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173755',
        appName: '选课中心',
        appId: 'order',
        appSecret: 'order',
        iconPath: 'iconcedaohang_xuankezhongxin',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173761',
        appName: '数据统计',
        appId: 'statistics',
        appSecret: 'statistics',
        iconPath: 'iconcedaohang_shujutongji',
        verify: '0',
        status: '1',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '11766827440177829',
        appName: '线索管理',
        appId: 'student',
        appSecret: 'student',
        iconPath: 'iconcedaohang_CRM',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: '_blank'
      },
      {
        id: '14445477732695069',
        appName: '消息平台',
        appId: 'msg',
        appSecret: 'msg',
        iconPath: '',
        verify: '1',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '15340278887563468',
        appName: '电子合同',
        appId: 'contract',
        appSecret: 'contract',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1085556743692288',
        appName: '系统管理',
        appId: 'auth',
        appSecret: 'auth',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '1',
        status: '0',
        appDesc:
                '权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理权限管理dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '1086054423068672',
        appName: '产品管理',
        appId: 'product',
        appSecret: 'product',
        iconPath: 'iconcedaohang_chanpinzhongxin',
        verify: '0',
        status: '0',
        appDesc: '产品管理',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '2106618124156928',
        appName: '营销获客',
        appId: 'channel',
        appSecret: 'channel',
        iconPath: 'iconcedaohang_yingxiaohuoke',
        verify: '0',
        status: '1',
        appDesc: '文都营销获客',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173753',
        appName: '线上资源',
        appId: 'consult',
        appSecret: 'consult',
        iconPath: 'iconcedaohang_zixungongju',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173755',
        appName: '选课中心',
        appId: 'order',
        appSecret: 'order',
        iconPath: 'iconcedaohang_xuankezhongxin',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '8185375542173761',
        appName: '数据统计',
        appId: 'statistics',
        appSecret: 'statistics',
        iconPath: 'iconcedaohang_shujutongji',
        verify: '0',
        status: '1',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '11766827440177829',
        appName: '线索管理',
        appId: 'student',
        appSecret: 'student',
        iconPath: 'iconcedaohang_CRM',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: '_blank'
      },
      {
        id: '14445477732695069',
        appName: '消息平台',
        appId: 'msg',
        appSecret: 'msg',
        iconPath: '',
        verify: '1',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      },
      {
        id: '15340278887563468',
        appName: '电子合同',
        appId: 'contract',
        appSecret: 'contract',
        iconPath: 'iconcedaohang_quanxianguanli',
        verify: '0',
        status: '0',
        appDesc: '',
        dr: '0',
        platform: 'pc',
        routerType: 'router'
      }
    ]
    const appSecretRef = ref()
    const tableData = reactive<TableDataInterFace>({
      type: 'app_table', // 每个表格唯一表示符
      tableInfo: {
        columns: [
          {
            field: 'appName',
            width: 150,
            title: '应用名称',
            fixed: 'left'
          },
          {
            field: 'appId',
            width: 150,
            title: '应用ID',
            sortable: true
          },
          {
            field: 'appSecret',
            minWidth: 200,
            title: 'appSecret'
          },
          {
            field: 'iconPath',
            minWidth: 200,
            showOverflow: true,
            title: '应用图标'
          },
          {
            field: 'platform',
            minWidth: 200,
            showOverflow: true,
            title: '平台'
          },
          {
            field: 'routerType',
            minWidth: 200,
            showOverflow: true,
            title: '路由方式'
          },
          {
            field: 'status',
            width: 80,
            title: '状态',
            slots: {
              default: 'status_template'
            }
          },
          {
            field: 'verify',
            width: 80,
            title: '是否验证',
            slots: {
              default: 'verify_template'
            }
          },
          {
            field: 'appDesc',
            minWidth: 200,
            title: '应用描述'
          }
        ], // 表头配置
        data: [] // 数据集合
      },
      rowspanList: ['appName', 'appId'],
      callback: async () => {
        return {
          resultList: dataList,
          //   checkList: [dataList[0], dataList[1]],
          total: 10
        } as ResultInterFace<any>
      },
      operation: {
        label: '操作',
        displaySize: 3,
        dataList: [
          {
            label: '编辑1',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          },
          {
            label: '编辑2',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          },
          {
            label: '编辑3',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          },
          {
            label: '编辑4',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          },
          {
            label: '编辑5',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          },
          {
            label: '编辑6',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          },
          {
            label: '编辑7',
            isShow: true,
            buttonFun: 'updateFun',
            width: 43
          }
        ]
      },
      //   titleOperation: [
      //     {
      //       label: '添加',
      //       isShow: true,
      //       buttonFun: 'addAppFun',
      //       icon: '123'
      //     }
      //   ],
      authControl: {
        isExpand: true,
        isCheckBox: true,
        columnDrop: false, // 是否可以拖拽
        toolbarCustom: true // 展示自定义
      }
    })
    const onClick = () => {
      console.log(appSecretRef.value.getDataListByTable())
    }
    return {
      onClick,
      appSecretRef,
      tableData
    }
  },
  components: {
    IVxeTable
  }
})
</script>
